<!-- 年规 - 客户规划 - 主页 -->
<template>
  <view>
    <view v-if="data" class="px-4 pb-25">
      <view class="py-4">
        <view class="flex c-#999 text-28">
          <view class="flex-1">币种：{{ currencyName }}</view>
          <view class="flex-shrink-0">负责人：{{ data.customer_planning?.nickname }}</view>
        </view>
      </view>
      <view class="relative card p-4">
        <image class="absolute right-0 bottom-0 w-208 h-194" src="/static/images/common/img_plan_money.jpg" />
        <view class="relative flex items-center">
          <view class="flex-1">
            <view class="text-60 c-#333 font-bold">{{ data.new_customer || 0 }}人</view>
            <view class="text-28 c-#999 mt-1">新客户数目标</view>
          </view>
          <view class="flex-1">
            <view class="text-60 c-#333 font-bold">{{ numFormat(data.new_customer_target || 0) }}W</view>
            <view class="text-28 c-#999 mt-1">新客户业绩目标（万）</view>
          </view>
        </view>
      </view>
      <!-- 新客户获客渠道 -->
      <view>
        <view class="flex justify-between py-3">
          <view class="text-40 c-#333 font-bold">新客户获客渠道</view>
          <view v-if="data?.customer_channel?.length > 2" class="flex items-center c-primary"
            :class="[{ 'pointer-events-none': !data?.customer_channel || data?.customer_channel?.length <= 2 }]"
            @click="state.showAllCustomerChannel = !state.showAllCustomerChannel">
            <view class="pr-1 text-28">{{ state.showAllCustomerChannel ? '收起' : '展开' }}</view>
            <u-icon :name="`arrow-${state.showAllCustomerChannel ? 'up' : 'down'}`" size="24" color="#f4af22" />
          </view>
        </view>
        <view class="card px-4 py-1.5">
          <view v-for="(item, index) in customerChannel" :key="index" class="flex items-center py-1.5">
            <view class="w-12 h-12 bg-primary rounded-1.5" />
            <view class="ml-2">{{ item.content }}</view>
          </view>
        </view>
      </view>
      <!-- 现有核心市场（TOP5） -->
      <view>
        <view class="flex justify-between py-3">
          <view class="text-40 c-#333 font-bold">现有核心市场（TOP5）</view>
          <view v-if="data?.core_market?.length > 2" class="flex items-center c-primary"
            :class="[{ 'pointer-events-none': !data?.core_market || data?.core_market?.length <= 2 }]"
            @click="state.showAllCoreMarket = !state.showAllCoreMarket">
            <view class="pr-1 text-28">{{ state.showAllCoreMarket ? '收起' : '展开' }}</view>
            <u-icon :name="`arrow-${state.showAllCoreMarket ? 'up' : 'down'}`" size="24" color="#f4af22" />
          </view>
        </view>
        <view class="card px-4 py-1.5">
          <view v-for="(item, index) in coreMarket" :key="index" class="py-2">
            <view class="flex items-center">
              <view class="w-138 text-40 c-primary font-bold">TOP{{ index + 1 }}</view>
              <view class="text-28 c-#333">{{ item.nation }}</view>
            </view>
            <view class="flex items-start mt-2.5 text-28 c-#333">
              <view class="w-138">情况说明:</view>
              <view class="flex-1">{{ item.content }}</view>
            </view>
          </view>
        </view>
      </view>
      <!-- 重点开发市场（国家） -->
      <view>
        <view class="flex justify-between py-3">
          <view class="text-40 c-#333 font-bold">重点开发市场（国家）</view>
          <view v-if="data?.key_market?.length > 2" class="flex items-center c-primary"
            :class="[{ 'pointer-events-none': !data?.key_market || data?.key_market?.length <= 2 }]"
            @click="state.showAllKeyMarket = !state.showAllKeyMarket">
            <view class="pr-1 text-28">{{ state.showAllKeyMarket ? '收起' : '展开' }}</view>
            <u-icon :name="`arrow-${state.showAllKeyMarket ? 'up' : 'down'}`" size="24" color="#f4af22" />
          </view>
        </view>
        <view class="card px-4 py-1.5">
          <view v-for="(item, index) in keyMarket" :key="index" class="py-1.5">
            <view class="flex items-center">
              <view class="w-12 h-12 bg-primary rounded-1.5" />
              <view class="ml-2">{{ item.nation }}</view>
            </view>
            <view class="flex items-start mt-2.5 text-28 c-#333">
              <view class="w-138">情况说明:</view>
              <view class="flex-1">{{ item.content }}</view>
            </view>
          </view>
        </view>
      </view>
      <!-- 市场活动规划 -->
      <view>
        <view class="flex justify-between py-3">
          <view class="text-40 c-#333 font-bold">市场活动规划</view>
          <view v-if="allPlanList?.length > 2" class="flex items-center c-primary"
            :class="[{ 'pointer-events-none': !allPlanList || allPlanList?.length <= 2 }]"
            @click="state.showAllPlan = !state.showAllPlan">
            <view class="pr-1 text-28">{{ state.showAllPlan ? '收起' : '展开' }}</view>
            <u-icon :name="`arrow-${state.showAllPlan ? 'up' : 'down'}`" size="24" color="#f4af22" />
          </view>
        </view>
        <view class="card px-4 py-1.5">
          <view v-for="(item, index) in planList" :key="index" class="py-1.5">
            <view class="text-32 c-#333">{{ item.month }}月份</view>
            <view v-for="(plan, planIndex) in item.list" :key="planIndex" class="flex items-center mt-3">
              
              <view v-if="plan.status == 0" class="event-indicator" />
              <u-icon v-else-if="plan.status == 1" name="checkmark-circle-fill" color="#f4af22" size="30" />
              <u-icon v-else-if="plan.status == 2" name="close-circle-fill" color="#999" size="30" />
              <view class="ml-2 text-28 c-#333"><text class="font-bold mr-1">{{ plan.month }}/{{ plan.day }}</text>{{ plan.content }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view v-else class="h-800 flex flex-col justify-center items-center">
      <z-empty imgWidth="200" imgHeight="200" descText="暂无客户规划" />
    </view>
    <view v-if="isSocietyManager || isPlanManager" class="bottom-wrap-16 flex bg-#fff border-top px-4"
      @click="emit('edit')">
      <view class="flex-1 button-edit">编辑</view>
    </view>
  </view>
</template>
<script setup>
import { numFormat } from '@/common/util/format'
import { usePlanStore } from '@/store/plan'
import { useUserStore } from '@/store/user'

const planStore = usePlanStore()
const userStore = useUserStore()

const emit = defineEmits(['edit'])
const props = defineProps({
  data: Object
})

const state = reactive({
  showAllCustomerChannel: false,
  showAllCoreMarket: false,
  showAllKeyMarket: false,
  showAllPlan: false,
})

const planStatus = ['待核实','已完成','未完成']

const currencyName = computed(() => planStore.currency?.label || '未添加')
const isSocietyManager = computed(() => userStore.isSocietyManager || userStore.isSocietyCreator)
const isPlanManager = computed(() => userStore.userInfo.id == props.data?.customer_planning?.id)
const customerChannel = computed(() => state.showAllCustomerChannel ? props.data?.customer_channel : props.data?.customer_channel?.slice(0, 2))
const coreMarket = computed(() => state.showAllCoreMarket ? props.data?.core_market : props.data?.core_market?.slice(0, 2))
const keyMarket = computed(() => state.showAllKeyMarket ? props.data?.key_market : props.data?.key_market?.slice(0, 2))
const planList = computed(() => state.showAllPlan ? allPlanList.value : allPlanList.value?.slice(0, 2))
const allPlanList = computed(() => {
  if (!props.data?.plan_list || props.data?.plan_list?.length == 0) return
  const list = []

  props.data?.plan_list?.forEach(item => {
    const plan = list.find(plan => plan.month == item.month)
    if (plan) {
      plan.list = plan.list || []
      plan.list.push(item)
    } else {
      list.push({ month: item.month, list: [item] })
    }
  })
  return list.sort((prev, current) => prev.month - current.month)
})

</script>

<style lang="scss" scoped>
.card {
  border-radius: 12rpx;
  background-color: #FFFFFF;
  box-shadow: -1.2246468525851679e-16px 2px 6px 0px rgba(206, 143, 12, 0.1);
}

.button-edit {
  width: 514rpx;
  height: 68rpx;
  border-radius: 12rpx;
  border: 2rpx solid #F4AF22;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #F4AF22;
  font-size: 28rpx;
}

.border-top {
  border-top: 2rpx solid #eee;
}

.event-indicator {
  width: 26rpx;
  height: 26rpx;
  margin: 0 2rpx;
  border-radius: 50%;
  border: 2rpx solid #F4AF22;
}
</style>
